<template>
  <div class="page-wrapper">
    <com-doc
      v-if="editFlag"
      @hide="hideChild"
      :fieldName="fieldName"
      :fileType="fileType"
      :titleName="titleName"
      :tableName="tableName"
      :mid="mid"
      :id="fid"
      height="false"
      @query="search"
      :isBrowse="isRead"
    ></com-doc>
    <!-- titleName表示文档所属模块名称，tableName表示业务表表名用于保存在附件表中(大写),isBrowse表示浏览状态，fileType表示附件所属类别
    fieldName表示附件存放在业务表中的对应字段名，fid表示为本列表数据id，mid表示父组件主id用于保存在文档数据表mid字段中-->
    <div class="buttons-wrapper">
      <span class="businessButtonDownload" style="margin-right:8px;" @click="download">下载</span>
      <span class="businessButtonAdd" style="margin-right:8px;" @click="add">新增</span>
      <span class="businessButtonEdit" style="margin-right:8px;" @click="edit">编辑</span>
      <span class="businessButtonDelete" style="margin-right:8px;" @click="del">删除</span>
    </div>
    <el-table
      class="businessTable"
      :highlight-current-row="true"
      stripe
      :data="historyData"
      ref="multipleTable"
      :height="tableHeight"
      max-height="calc(100%)"
      row-class-name="row"
      cell-class-name="column"
      @selection-change="handleSelectionChange"
      @select="select"
      @select-all="selectAll"
      @row-click="rowClick"
      @row-dblclick="dblclick"
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        :label="item.label"
      >
        <template slot-scope="scope">
          <template v-if="item.prop == 'fileName'">
            <img
              :src="setClass(scope.row['fileExt'])"
              style="margin-right:3px;vertical-align: middle;"
            />
            <span>{{ scope.row[scope.column.property] }}</span>
          </template>
          <template
            v-else-if="item.prop !== 'fileName'&&item.prop !== 'fileExt'"
          >{{ scope.row[scope.column.property] }}</template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="businessPagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="queryList.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import winmove from "@/directives/winmove";
import ComDoc from "../../../system/components/attachment/detail";
import { fileList, fileDel, fileDownload } from "@/system/api/attachment";
export default {
  name: "ComDocManage",
  props: {
    titleName: {
      default: "项目管理",
    },
    tableName: {
      default: "T_FILE_UPLOAD",
    },
    id: {
      default: "",
    },
    fieldName: {
      default: "FJ",
    },
    isBrowse: {
      default: false,
    },
    fileType: {
      default: "",
    },
  },
  data() {
    return {
      mid: 0,
      color: {
        jpg: "red",
        xlsx: "#0080FF",
      },
      isRead: false,
      pageSizes: [5, 10, 15, 20],
      tableHeight: 0,
      fid: "",
      isAble: false,
      total: 0,
      currentPage: 1,
      queryList: {
        keyword: "",
        pageSize: 10,
        page: 0,
        mId: "",
        tableName: "",
        fieldName: "",
        type: 1,
      },
      historyData: [],
      multipleSelection: [],
      editFlag: false,
      action: "",
      windowShow: true,
      name: "",
      tableLabel: [
        {
          label: "附件名",
          width: 220,
          prop: "fileName",
        },
        {
          label: "附件大小(KB)",
          width: "",
          prop: "fileSize",
        },
        {
          label: "字段名",
          width: "",
          prop: "fieldName",
        },
        {
          label: "描述",
          width: "",
          prop: "note",
        },
        {
          label: "上传时间",
          width: "",
          prop: "upTime",
        },
      ],
      // 表格数据
      tableData: [],
    };
  },
  directives: {
    winmove,
  },
  components: {
    ComDoc,
  },
  async mounted() {
    await this.getTableHeight();
    this.queryData(0);
  },
  methods: {
    // table高度
    getTableHeight() {
      let that = this;
      let contentHeight = document.getElementsByClassName("page-wrapper")[0]
        .offsetHeight;
      that.tableHeight = contentHeight - 64 - 56;
      let tableBodyHeight = that.tableHeight - 40;
      that.queryList.pageSize = parseInt(tableBodyHeight / 40);
      this.end = parseInt(tableBodyHeight / 40);
      that.pageSizes.push(that.queryList.pageSize);
    },
    setClass(item) {
      if (item === "jpg" || item === "png" || item === "gif") {
        return require("../../../assets/image/icon_file_pic.png");
      } else if (item === "xlsx" || item === "xls") {
        return require("../../../assets/image/icon_file_execl.png");
      } else if (item === "txt" || item == "doc" || item == "docx") {
        return require("../../../assets/image/icon_file_word.png");
      } else if (item === "mp4" || item === "avi") {
        return require("../../../assets/image/icon_file_video.png");
      } else if (item === "rar" || item === "zip") {
        return require("../../../assets/image/icon_file_zip.png");
      } else if (item === "pdf") {
        return require("../../../assets/image/icon_file_ppt.png");
      } else if (item === "ppt") {
        return require("../../../assets/image/icon_file_execl.png");
      } else if (item === "dwg") {
        return require("../../../assets/image/icon_file_cad.png");
      } else {
        return require("../../../assets/image/icon_file_other.png");
      }
    },
    download: function () {
      let i;
      let selections = this.multipleSelection;
      i = selections.length;
      if (i !== 1) {
        this.message("请先选中需要下载的数据！", 3);
        return false;
      }
      var id = selections[0].id;
      fileDownload({ id: id }).then((res) => {
        var baseUrl = this.api;
        var length = baseUrl.length - 1;
        var index = baseUrl.indexOf("/");
        if (index == length) {
          window.location.href = baseUrl.substring(0, length - 1) + res.info;
        } else {
          window.location.href = baseUrl + res.info;
        }
      });
    },
    search: function (id) {
      this.mid = id;
      this.queryData(0);
    },
    handleSizeChange(val) {
      this.queryList.pageSize = val;
      this.queryData(0);
    },
    handleCurrentChange(val) {
      this.queryData(val);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let count = 1;
      for (let j = 0; j < this.multipleSelection.length; j++) {
        if (this.multipleSelection[j].state == 0) {
          count = count + 1;
        }
      }
      this.isAble = count;
    },
    // eslint-disable-next-line no-unused-vars
    rowClick(row, col, event) {
      row.flag = !row.flag;
      this.$refs.multipleTable.toggleRowSelection(row, row.flag);
    },
    // eslint-disable-next-line no-unused-vars
    dblclick(row, col, event) {
      this.fid = row.id;
      this.editFlag = true;
      this.isRead = true;
    },
    queryData: function (page) {
      if (page) {
        this.queryList.page = page - 1;
        this.currentPage = page;
      } else {
        this.queryList.page = 0;
        this.currentPage = 1;
      }
      this.queryList.mid = this.mid;
      this.queryList.tableName = this.tableName;
      this.queryList.fieldName = this.fieldName;
      fileList(this.queryList).then((res) => {
        if (res.success) {
          this.total = res.totalCount;
          this.tableData = res.info;
          if (res.totalCount < this.queryList.pageSize) {
            this.historyData = this.tableData;
          } else {
            this.historyData = this.tableData.slice(0, this.queryList.pageSize);
          }
          console.log();
        } else {
          this.historyData = [];
          this.currentPage = 1;
          this.total = 0;
        }
      });
    },
    hide: function () {
      this.windowShow = false;
      setTimeout(() => {
        this.$emit("hide");
        this.$emit("updateFileName", this.name);
      }, 400);
    },
    hideChild: function () {
      this.editFlag = false;
      this.search;
    },
    add: function () {
      if (!this.fileType) {
        this.message("请先选择资料类别！", 3);
        return false;
      }
      this.isRead = false;
      this.fid = "";
      this.editFlag = true;
    },
    select(e) {
      this.multipleSelection = e;
    },

    selectAll(e) {
      this.multipleSelection = e;
    },
    edit: function () {
      let i;
      let selections = this.multipleSelection;
      i = selections.length;
      if (i !== 1) {
        this.message("请先选中需要编辑的数据！", 3);
        return false;
      }
      this.fid = selections[0].id;
      this.isRead = false;
      this.editFlag = true;
    },
    del: function () {
      if (this.isBrowse == true) {
        return false;
      }
      var i;
      var selections = this.multipleSelection;
      i = selections.length;
      if (i !== 1) {
        this.message("请先选中需要删除的一条数据！", 3);
        return false;
      }
      this.messageBox("此操作将永久删除该文件, 是否继续?").then((res) => {
        if (res.action) {
          var id = selections[0].id;
          fileDel({ id: id, type: 1 }).then((res) => {
            this.message(res.msg, 1);
            this.queryData(0);
          });
          this.message("删除成功！", 1);
        } else {
          this.queryData(0);
          this.message("取消删除！", 3);
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.topbar {
  height: 56px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px;
  line-height: 56px;
  margin-bottom: 12px;
  display: flex;
  justify-content: left;
}

.iconxitongpingtai-tongyongbaobiao {
  font-size: 24px;
  margin: 0px 14px 0px 20px;
  color: var(--button-active-back-color);
}

.page-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
}

.buttons-wrapper {
  display: flex;
  width: 100%;
  height: 64px;
  padding: 16px;
}

.select-name {
  flex: 1;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  width: 65px;
  margin-right: 19px;
  text-align: right;
}

.button {
  width: 82px;
  height: 32px;
  margin: 22px auto;
}

.manage-list {
  height: calc(100% - 56px);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px;
}

.manage-list >>> .iconkuangjia-sousuo {
  font-size: 13px !important;
  margin-right: 7px;
  color: var(--icon-new-color);
}

.manage-list >>> .iconbiaoge-shanchu {
  font-size: 13px !important;
  margin-right: 7px;
  color: var(--icon-del-color);
}

.manage-list >>> .iconbiaoge-bianji {
  font-size: 13px !important;
  margin-right: 7px;
  color: var(--icon-edit-color);
}
</style>
<style>
</style>
